<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>流程控制语句-for循环高级</title>
    <script>
      /*
                   循环嵌套是指在一个循环语句中再定义一个循环语句的语法结构，
                   例如在for循环语句中，可以再嵌套一个for 循环，这样的for 循环语句我们称之为双重for循环

                   - 内层循环可以看做外层循环的语句
                   - 内层循环执行的顺序也要遵循 for 循环的执行顺序
                   - 外层循环执行一次，内层循环要执行全部次数

                   注意: 理论上循环嵌套的层数没有限制,但是嵌套层数越多,性能越差,一般实际开发中不超过3层!!!
                 */
      //情况一: 内外层for循环互不影响
      //外层for
      /* for (let i = 0; i < 10; i++) {
                   //内层for
                   for (let j = 0; j < 10; j++) {
                     console.log(i, j)
                   }
                 } */

      /*  for (let i = 0; i < 5; i++) {
                   for (let j = 0; j < 5; j++) {
                     document.write('☆')
                   }
                   document.write('<br/>')
                 } */

      //情况二: 内外层for循环有影响
      /* for (let i = 0; i < 10; i++) {
                   for (let j = 0; j < i; j++) {
                     console.log(i, j)
                   }
                 } */

      /* for (let i = 0; i < 5; i++) {
                   for (let j = 0; j <= i; j++) {
                     document.write('☆')
                   }
                   document.write('<br/>')
                 } */

      /*  for (let i = 1; i <= 10; i++) {
                  for (let j = 10; j >= i; j--) {
                    document.write('☆')
                  }
                  document.write('<br/>')
                } */

      /* for (let i = 0; i <= 5; i++) {
             for (let j = 0; j <= 10; j++) {
               if (i == 0 || i == 5 || j == 0 || j == 10) {
                 document.write('☆')
               } else {
                 document.write('&nbsp;&nbsp;&nbsp;')
               }
             }
             document.write('<br/>')
           }
      */

      for (let i = 0; i <= 10; i++) {
        for (let j = 0; j <= i; j++) {
          if (i == 10 || j == 0 || j == i) {
            document.write('☆')
          } else {
            document.write('&nbsp;&nbsp;&nbsp;')
          }
        }
        document.write('<br/>')
      }

      //情况三: for的三个参数可以复合书写
      /* for (let i = 0, j = 0; i < 5 && j < 10; i++, j += 2) {
                  console.log(i, j)
                } */
    </script>
  </head>
  <body></body>
</html>
